<script setup lang="ts">
import DisplayComponent from '@/layouts/DisplayComponent.vue';
import { message } from '@/vivid-ui/utils/message';
import { ref } from 'vue';
const ContextMenu = ref<Array<{ label: string }>>([
  { label: 'Item 1' },
  { label: 'Item 2' },
  { label: 'Item 3' },
])
const handleSelect = (item: { label: string }) => {
  console.log(item)
  message(`You selected ${item.label}`)
}
const rawHtml = `
<script setup lang="ts">
import { ref } from 'vue';
const ContextMenu = ref<Array<{ label: string }>>([
  { label: 'Item 1' },
  { label: 'Item 2' },
  { label: 'Item 3' },
])
const handleSelect = (item: { label: string }) => {
  message(\`You selected $\{item.label}\`)
}
<\/script>
<template>
  <vi-context-menu :items="ContextMenu" @select="handleSelect">
    <div class="h-[200px] w-full bg-cyan-400">

    </div>
  </vi-context-menu>
</template>
`
</script>
<template>
  <DisplayComponent :raw-html="rawHtml">
    <vi-context-menu :items="ContextMenu" @select="handleSelect">
      <div class="h-[200px] w-full bg-cyan-400">

      </div>
    </vi-context-menu>
  </DisplayComponent>

</template>
